<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h2>prevent阻止浏览器默认行为</h2>
      <!-- prevent阻止浏览器默认行为,contextmenu是点击右键触发 -->
      <button @contextmenu.prevent="contextmenu">点击右键没有菜单</button>
      <hr />
      <h2>once只触发一次</h2>
      <!-- .once只触发一次 -->
      <button @contextmenu.prevent.once="contextmenu">
        只阻止一次默认行为
      </button>
      <hr />
      <!-- .capture修饰符 控制当前时间在捕获阶段触发(如果不写,则默认都是在冒泡阶段触发)-->
      <div @click.capture="outerClick">
        <h2>outer</h2>
        <div @click="middleClick">
          <h2>middle</h2>
          <!-- 
          .stop修饰符:
            阻止当前事件的传播
            如果要阻止捕获,在最外层元素上书写
            如果要阻止冒泡,在最内层元素上书写 -->
          <div @click.stop="insideClick">
            <h2>inside</h2>
          </div>
        </div>
      </div>
      <hr />
      <!-- .self修饰符:
          控制只有在当前绑定事件的元素上发生事件,才能触发事件 -->
      <div @click.self="outerClick">
        <h2>outer</h2>
        <div @click="middleClick">
          <h2>middle</h2>
          <div @click="insideClick">
            <h2>inside</h2>
          </div>
        </div>
      </div>
      <hr />
      <!--       
      按键别名修饰符
      .enter(配合键盘事件使用):当输入回车的时候执行回调函数 -->
      <h2>回车键触发回调函数</h2>
      <input type="text" @keyup.enter="publish">
    </div>
    <script>
      Vue.config.productionTip = false;
      //实例化Vue
      const vm = new Vue({
        el: "#app",
        data() {
          return {};
        },
        methods: {
          contextmenu() {
            console.log("右键没有菜单");
          },
          outerClick() {
            console.log("outer");
          },
          middleClick() {
            console.log("middle");
          },
          insideClick() {
            console.log("inside");
          },
          publish(){
            console.log("publish");
          }
        },
      });
    </script>
  </body>
</html>
